import React from 'react'
import { Form,Input,Button,DatePicker } from 'antd'


class FilterForm extends React.Component{

    handleFilterSubmit=(e)=>{
        e.preventDefault()
        let fieldsValue=this.props.form.getFieldsValue()
        this.props.filterSubmit(fieldsValue)
    }

    reset=()=> {
        this.props.form.resetFields()
    }

    initFormList=()=>{
        const { getFieldDecorator }=this.props.form
        const formList = this.props.formList || []
        const formItemList = []
        if (formList && formList.length>0){
            formList.forEach((item) =>{
                let label = item.label || ''
                let field = item.field || ''
                let initialValue = item.initialValue || ''
                let placeholder = item.placeholder || ''
                let className =item.className || ''
                // let width = item.width

                if (item.type === 'INPUT'){
                    const INPUT = <Form.Item label ={label} key={field}>
                        {
                            getFieldDecorator(field,{
                                initialValue:initialValue
                            })(
                                <Input  type="text" placeholder={placeholder} className={className}/>
                            )
                        }
                    </Form.Item>
                    formItemList.push(INPUT)
                }
                if (item.type === 'DATEPICKER'){
                    let timeProp={}
                    if (initialValue){
                        timeProp.initialValue =initialValue || ''
                    }
                    const begin_time=<Form.Item label={label||''} key='begin_time'>
                        {
                            getFieldDecorator([field], {
                                    ...timeProp
                                }
                            )(
                                <DatePicker placeholder="选择开始时间" showTime={true} format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </Form.Item>
                     formItemList.push(begin_time)
                    // colon 去掉:
                    const end_time=<Form.Item label="~" colon={false} key='end_time'>
                        {
                            getFieldDecorator([item.field2], {
                                    ...timeProp
                                }
                            )(
                                <DatePicker placeholder="选择结束时间" showTime={true} format="YYYY-MM-DD HH:mm:ss"/>
                            )
                        }
                    </Form.Item>
                    formItemList.push(end_time)
                }
            })
        }
        return formItemList
    }

    render(){
        return(
            <Form layout="inline">
                <Form.Item>
                    { this.initFormList() }
                    <Button type="primary" onClick={this.handleFilterSubmit}>查询</Button>
                    <Button type="ghost" onClick={this.reset}>重置</Button>
                </Form.Item>
            </Form>
        )
    }
}

export default FilterForm =Form.create({})(FilterForm)